<template>
  <div class="py-2 px-5">
    <div><h3 class="text-lg font-bold">商品推荐</h3></div>
    <div class="grid grid-cols-3 gap-4 mt-4">
      <div v-for="(item, index) in productsList" :key="index">
        <ProductCard :item="item" />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref,onMounted } from "vue";
import { generateProducts } from "@/mock/data/product";
import ProductCard from "@/components/product/ProductCard.vue";

import type { ProductItem,ProductInfo } from "@/api/types/product";

const productsList = ref<ProductItem[]>([]);
onMounted(() => {
  productsList.value = generateProducts(9) as ProductInfo[];
});
</script>
